﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
	<script src="../js/three.js"></script>
	<script src="../js/dat.gui.js"></script>
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }
    </style>
</head>
<body onload="start();">
	<video id="video1" autoplay loop style="display:none;">
		<source src="videos/1.ogg" type='video/ogg; codecs="theora, vorbis"'>
	</video>


<script>

    var camera, scene, renderer;
    var mesh;
	var texture;
	var video1;


	function start()
	{    
		init();
		animate();
	}
	
    function init() {

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        //
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 400;
        scene = new THREE.Scene();


        var geometry = new THREE.PlaneGeometry( 256, 256);

		video1 = document.getElementById( 'video1' );
		
		image = document.createElement( 'canvas' );
		image.width = 480;
		image.height = 204;

		imageContext = image.getContext( '2d' );
		imageContext.fillStyle = '#000000';
		imageContext.fillRect( 0, 0, 480, 204 );
				
		texture = new THREE.Texture(video1);
		texture.minFilter = THREE.LinearFilter;
		texture.magFilter = THREE.LinearFilter;
		texture.needsUpdate = true;
        var material = new THREE.MeshBasicMaterial({map:texture,overdraw:true});
        var mesh = new THREE.Mesh( geometry,material );
        scene.add( mesh );

        //
        window.addEventListener( 'resize', onWindowResize, false );
		createUI();
    }

	
	var para;
	function createUI()
	{
		var parameter = function() {
			this.repeat = 1;
			this.wrap  = 1;
		};
	
		para = new parameter();
		var gui = new dat.GUI();
		gui.add(para,"repeat",1,5).name("纹理重复");
		gui.add(para,"wrap",1,3).name("纹理环绕").step(1);
	}
			
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }

    function animate() {
	
		change();	
		//textureLoaded();
		texture.needsUpdate = true;
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
	
	function textureLoaded()
	{
		if ( video1.readyState === video1.HAVE_ENOUGH_DATA ) {
			imageContext.drawImage( video1, 0, 0 );
			if ( texture ) texture.needsUpdate = true;
		}
	}
	
	function change()
	{
		texture.repeat.x = texture.repeat.y= para.repeat;
		if(para.wrap == 1)
		{
			texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
		}else if(para.wrap == 2)
		{
			texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
		}else if(para.wrap == 3)
		{
			texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
		}
		texture.needsUpdate = true;
	}

</script>

</body>
</html>
